<template>
	<view style="width: 100%;padding: 10upx;">
		
		<view style="padding: 10upx 4upx;background-color: #FFFFFF;">
				<!-- <picker mode="date" :value="date" start="2015-09-01" end="2017-09-01" bindchange="bindDateChange">
				    <view class="picker" style="height: 60upx;line-height: 60upx;background: #FFFFFF;border-radius: 10upx;padding-left: 8upx;">
				      预约日期: {{date}}
				    </view>
				  </picker> -->
				  <view  style="height: 60upx;line-height: 60upx;background: #edeff2;border-radius: 2upx;text-align: center;">
				    星期
				  </view>
				  <view style="display: flex;">
					  <view class="perDay" :class="selIndex == item.sel ? 'daySelected' : ''" v-for="(item, index) in days" :key="index" @click="changeSel(item.sel)">
						  {{item.text}}
					  </view>
				  </view>
		</view>
		
		<view style="padding: 50upx 30upx;">
		  <picker mode="time" :value="time" start="09:01" end="21:01" @change="bindTimeChange">
		    <view class="picker" style="height: 60upx;line-height: 60upx;background: #FFFFFF;border-radius: 10upx;padding-left: 8upx;">
		      预约时间: {{time}}
		    </view>
		  </picker>
		</view>
		
	
		
		<view style="padding: 30upx;">
			<view style="width: 100%;height: 88upx;background: #088fff;border-radius: 20upx;display: flex;align-items: center;justify-content: center;" @click="goYuyue()">
				<span style="font-size: 34upx;font-family: PingFang SC, PingFang SC-Bold;color: #ffffff;">立即预约</span>
			</view>
		</view>
	</view>
	
</template>

<script>
	export default {
			data() {
				return {
					id: '',
					catId: '',
					date: '2016-09-01',
					time: '12:00',
					sel: 0,
					selIndex: 0,
					days:[{sel:1, text:'周一'},
					{sel:2, text:'周二'},
					{sel:3, text:'周三'},
					{sel:4, text:'周四'},
					{sel:5, text:'周五'},
					{sel:6, text:'周六'},
					{sel:7, text:'周日'}]
				};
			},
			onLoad(options){
				this.id = options.id
				this.catId = options.catId
			},
			watch:{
				//显示空白页
				
			},
			methods: {
				changeSel(sel){
					this.selIndex = sel;
				},
				
				Change(e){
					this.sel = e.detail.value;
				},
				
				goYuyue(){
					var that = this;
					if(this.selIndex == 0){
						this.$api.msg('请先选择星期');
						return
					}
					
					this.$zdapi.getYyzxsub({
						uid: wx.getStorageSync('uid'),
						token: wx.getStorageSync('token'),
						conid: that.id,
						days: that.sel,
						cat_id: that.catId,
						times: that.time
					}).then( res => {
						that.$api.msg(res.msg)
					})
				},
				bindTimeChange: function(e) {
				    this.time = e.detail.value
				  },
			}
		}
	</script>

<style>
	page{
		background: #edeff2;
	}
	
	.daySelected{
		background: #088fff;
		color: #FFFFFF !important;
		border: 2upx solid #088fff !important;
	}
	
	.perDay{
		border: 2upx solid #333333;
		color: #333;
		border-radius: 50%;
		width: 80upx;
		height: 80upx;
		line-height: 80upx;
		font-size: 28upx;
		text-align: center;
		margin-top: 8upx;
		margin-left: 8upx;
	}
</style>
